<template>
	<!-- 确认支付弹出框 -->
	<view class="pay-modal">
		<view class="pay-modal-main">
			<view class="close">
				<image class="img" src="@/static/img/pay/close.png" @tap="toCloseHandle" mode=""></image>
				<!-- <img src="@/static/img/pay/close.png" alt="" @tap="closeHandle"> -->
			</view>
			<view class="pay-methods-title">
				<text>选择支付方式</text>
			</view>
			<view class="sum">
				<text>￥</text>
				<text>{{ order.price ? order.price : 0 }}</text>
			</view>
			<view class="wx-pay">
				<image class="img" src="@/static/img/pay/wx.png" mode=""></image>
				<!-- <img src="@/static/img/pay/wx.png" alt=""> -->
				<text>微信支付</text>
				<u-radio-group v-model="value" @change="radioGroupChange" class="choose">
					<u-radio @change="radioChange" :name="list[0].name" :disabled="list[0].disabled" active-color="#F4333C">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="zfb-pay">
				<image class="img" src="@/static/img/pay/zfb.png" mode=""></image>
				<!-- <img src="@/static/img/pay/zfb.png" alt=""> -->
				<text>支付宝</text>
				<u-radio-group v-model="value" @change="radioGroupChange" class="choose">
					<u-radio @change="radioChange" :name="list[1].name" :disabled="list[1].disabled" active-color="#F4333C">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="confirm-pay-row">
				<u-button type="default" shape="circle" text="确认支付" class="confirm-pay-btn" @click="confirmPayHandle"
					hover-class="none">确认支付</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"payModal",
		props:{
			info:{
				type:Object,
				default:()=>{}
			},
			isShow:{
				type:Boolean,
				default:false
			},
			key:{
				type:String,
				default:"price"
			}
		},
		data() {
			return {
				//微信支付宝支付选中
				list: [{
					name: 'wx',
					disabled: false
				},
				{
					name: 'zfb',
					disabled: false
				},
				],
				//支付方式
				value: 'wx'
			};
		},
		computed:{
			order(){
				return this.info.map(item=>({...item,price:item[this.key]}))
			}
		},
		methods:{
			//取消支付
			toCloseHandle() {
				this.$emit("closeHandle")
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// this.value = e;
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// this.value = e;
			},
			//确认支付
			confirmPayHandle() {
				if (this.value == 'wx') {
					console.log('调用微信支付');
				} else {
					console.log('调用支付宝支付');
				}
				uni.navigateTo({
					url: `` 
				})
			}
		}
	}
</script>

<style lang="scss">
	.pay-modal {
		border-radius: 24rpx;
		background: #fff;
	
		.pay-modal-main {
			padding: 32rpx 30rpx;
	
			.close {
				display: flex;
	
				.img {
					margin-left: auto;
					width: 28rpx;
					height: 28rpx;
				}
			}
	
			.pay-methods-title {
				text-align: center;
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
			}
	
			.sum {
				text-align: center;
				margin-top: 60rpx;
	
				>text:first-child {
					font-size: 30rpx;
					color: #F4333C;
				}
	
				>text:last-child {
					font-size: 60rpx;
					color: #F4333C;
					font-weight: bold;
				}
			}
	
			.wx-pay {
				display: flex;
				align-items: center;
				margin-top: 90rpx;
	
				.img {
					width: 37rpx;
					height: 32rpx;
				}
	
				>text {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 12rpx;
				}
	
				.choose {
					margin-left: auto;
				}
			}
	
			.zfb-pay {
				display: flex;
				align-items: center;
				margin-top: 71rpx;
	
				.img {
					width: 33rpx;
					height: 32rpx;
				}
	
				>text {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 12rpx;
				}
	
				.choose {
					margin-left: auto;
				}
			}
	
			.confirm-pay-row {
				margin-top: 100rpx;
	
				.confirm-pay-btn {
					background-color: #F4333C;
					color: #fff;
					height: 90rpx;
				}
	
				.u-hairline-border:after {
					border: none;
				}
			}
		}
	}
</style>